<template>
  <view class="login-page" :style="{'padding-top': statusBar + 'px'}">
    <!-- 顶部：语言 -->
    <view class="lang-bar">
      <picker
        mode="selector"
        :range="langList"
        range-key="key"
        :value="langIndex"     
        @change="changeLanguage"
      >
        <view class="uni-input">
          {{ selectedLang.key ? selectedLang.key : $t('user.language') }}
          <text class="cuIcon-unfold"></text>
        </view>
      </picker>

    </view>

    <!-- 标题 -->
    <view class="title-wrap">
      <text class="title">欢迎来到</text>
      <text class="brand">OQ</text>
    </view>

    <!-- 表单 -->
    <view class="form">
      <!-- 账号 -->
      <view class="field">
        <text class="ico">👤</text>
        <input
          class="ipt"
          v-model.trim="loginForm.account"
          placeholder="请输入用户 ID"
          placeholder-style="color:#C8D1E2"
          maxlength="32"
          confirm-type="done"
        />
      </view>

      <!-- 密码 -->
      <view class="field">
        <text class="ico">🔒</text>
        <input
          class="ipt"
          v-model="loginForm.password"
          :password="!pwdVisible"
          placeholder="请输入密码"
          placeholder-style="color:#C8D1E2"
          maxlength="32"
          confirm-type="done"
        />
        <text class="toggle" @tap="pwdVisible = !pwdVisible">{{ pwdVisible ? '隐藏' : '显示' }}</text>
      </view>

      <!-- 忘记/注册 -->
      <view class="row-links">
        <text class="link" @tap="onForgot">{{ $t('user.remenberMe') }}</text>
        <text class="link" @tap="onRegister">{{ $t('user.register') }}</text>
      </view>

      <!-- 协议 -->
      <view class="agree" @tap="agreed = !agreed">
        <view class="chk" :class="{on: agreed}"></view>
        <text class="agree-text">
          登录即表示您同意
          <text class="link" @tap.stop="openProtocol('user')">《用户协议》</text>
          和
          <text class="link" @tap.stop="openProtocol('privacy')">《隐私协议》</text>
        </text>
      </view>

      <!-- 登录按钮 -->
      <button class="btn-login" :class="{disabled: disabled}" :disabled="disabled" @tap="onSubmit">{{ $t('user.login') }}</button>
    </view>

    <!-- 其他登录方式 -->
    <view class="other">
      <text class="other-title">其他登录方式</text>
      <view class="other-item" @tap="onPhoneLogin">
        <view class="other-circle"><text class="other-emoji">📱</text></view>
      </view>
    </view>
  </view>
</template>

<script>
	
	import { useloginStore } from '@/store/login'
	import config from "@/common/config"
	import pinia from '@/store/index'
	import packageData from "../../package.json"
	
	const loginStore = useloginStore(pinia)
	
export default {
  data() {
    return {
      statusBar: 20,
      loginForm: {
        account: '13800000020',
        password: '123456'
      },
      pwdVisible: false,
      agreed: true,

      // 多语言（沿用你项目里的）
     selectedLang: {},      // ← 不是空字符串
        langIndex: 0,          // ← picker 当前索引
        langList: config.langList()
    }
  },
  computed: {
    disabled() {
      return !(this.loginForm.account && this.loginForm.password && this.agreed)
    }
  },
  onLoad(options) {
    // #ifdef APP-PLUS
    try { this.statusBar = plus.navigator.getStatusbarHeight() } catch (e) {}
    // #endif
    // 读取语言（沿用你原来的存取方式）
  this.langList = config.langList()

  // 取缓存并兼容字符串
  let lang = uni.getStorageSync('language')
  try {
    if (typeof lang === 'string') lang = JSON.parse(lang)
  } catch (e) {}

  if (lang && lang.value) {
    this.selectedLang = lang
    const i = this.langList.findIndex(v => v.value === lang.value)
    this.langIndex = i >= 0 ? i : 0
  } else {
    this.selectedLang = this.langList[0] || { key: this.$t('user.language'), value: 'zh-CN' }
    this.langIndex = 0
  }
  // 应用语言
  this.$i18n && (this.$i18n.locale = this.selectedLang.value)
  uni.setLocale && uni.setLocale(this.selectedLang.value)
  },
  methods: {
    changeLanguage(e) {
      const lang = this.langList[e.detail.value]
      if (!lang) return
      this.selectedLang = lang
      this.$i18n && (this.$i18n.locale = lang.value)
      uni.setLocale && uni.setLocale(lang.value)
      uni.setStorageSync('language', lang)
    },
    onForgot() { uni.showToast({ title: '忘记密码（示例）', icon: 'none' }) },
    onRegister() { uni.showToast({ title: '注册（示例）', icon: 'none' }) },
    openProtocol(type) {
      uni.showToast({ title: type === 'user' ? '用户协议' : '隐私协议', icon: 'none' })
    },
    onPhoneLogin() { uni.showToast({ title: '手机登录（示例）', icon: 'none' }) },
	
	async onSubmit(){
		if(this.loginForm.rememberMe){
			uni.setStorageSync('LoginAccount',this.loginForm);
		}else{
			uni.removeStorageSync('LoginAccount');
		}
		if(this.loginForm.account==""){
			uni.showToast({
				title: this.$t('user.inputAccount'),
				icon: "none"
			});
			return false;
		}
		if(this.loginForm.password==""){
			uni.showToast({
				title: this.$t('user.inputPass'),
				icon: "none"
			});
			return false;
		}
		let client_id=uni.getStorageSync('client_id');
		if(client_id){
			this.loginForm.client_id=client_id;
		}
		this.doLogin(this.loginForm);
		
	},
	doLogin(data){
		this.$api.LoginApi.login(data).then(res => {
			if (res.code == 0) {
				uni.setStorageSync('authToken', res.data.authToken)
				let userInfo=res.data.userInfo;
				// 登录成功后绑定wss
				this.socketIo.send({
					type: "bindUid",
					user_id: userInfo.user_id,
					token:res.data.authToken
				});
				loginStore.login(userInfo);
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		})
	}

     
  }
}
</script>

<style lang="scss" scoped>
$blue: #2F73FF;
$textDeep: #1f2430;

/* 页面整体 */
.login-page {
  min-height: 100vh;
  background: #fff;
  padding: 12px 22px 40px;
  box-sizing: border-box;
}

/* 顶部语言 */
.lang-bar { display: flex; justify-content: flex-end; }
.lang-cell { display: inline-flex; align-items: center; gap: 6px; color: #2a2f3a; }
.lang-text { font-size: 14px; }
.lang-arrow { font-size: 12px; opacity: .6; }

/* 标题 */
.title-wrap {
	height: 230rpx;
  margin: 16px 0 4px;
  display: flex; align-items: center; gap: 6px;
  .title { font-size: 26px; font-weight: 700; color: $textDeep; }
  .brand { font-size: 26px; font-weight: 700; color: $blue; }
}

/* 表单 */
.form { margin-top: 16px; }

/* 下划线输入 */
.field {
  height: 130rpx;
  display: flex; align-items: center;
  border-bottom: 1px solid #EEF1F6;
}
.ico { width: 24px; text-align: center; font-size: 16px; opacity: .45; }
.ipt {
  flex: 1;
  height: 40px; line-height: 40px;
  font-size: 16px; color: #2b303b;
}
.toggle { font-size: 14px; color: #8AA2D9; padding: 6px 4px; }

/* 链接行 */
.row-links {
  margin-top: 10px;
  height: 80rpx;
  align-items: center;
  display: flex; justify-content: space-between;
  .link { font-size: 14px; color: $blue; }
}

/* 协议 */
.agree {
  margin-top: 16px;
  display: flex; align-items: flex-start; gap: 10px;
}
.chk {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid #9FB4E9; background: #fff;
  &.on { background: $blue; border-color: $blue; position: relative; }
  &.on::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 8px; height: 12px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(40deg);
  }
}
.agree-text { font-size: 13px; color: #6D7994; line-height: 1.6; }
.link { color: $blue; }

/* 登录按钮（大圆角胶囊） */
.btn-login {
  margin-top: 18px;
  height: 46px; line-height: 46px;
  border-radius: 26px;
  color: #fff; font-size: 16px; font-weight: 600;
  background: linear-gradient(180deg, #AFC7FF, #8FB2FF);
  box-shadow: 0 10px 24px rgba(120, 140, 255, .25);
  &.disabled { opacity: .5; }
}

/* 其他登录方式 */
.other {
  margin-top: 36px;
  display: flex; flex-direction: column; align-items: center;
}
.other-title { font-size: 14px; color: #6C748A; }
.other-item { margin-top: 16px; }
.other-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: #F4F7FF; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px #E6ECFF;
}
.other-emoji { font-size: 26px; color: $blue; }
</style>
